// 城市排名
(function() {
    var myChart = echarts.init(document.querySelector(".line .chart"));
    var salvProName =["西湖区","上城区","拱墅区","下城区","江干区","滨江区","萧山区","萧山区","临安区","富阳区","建德","桐庐","淳安"];
    var salvProValue =[239,181,154,144,135,117,74,72,67,55,43,22,11];
    var salvProMax =[];//背景按最大值
    for (let i = 0; i < salvProValue.length; i++) {
        salvProMax.push(salvProValue[0])
    };
    var option = {
        // backgroundColor:"#003366",
        grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            top: '2%',
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            },
            formatter: function(params) {
                return params[0].name  + ' : ' + params[0].value
            }
        },
        xAxis: {
            show: false,
            type: 'value'
        },
        yAxis: [{
            type: 'category',
            inverse: true,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                },
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            data: salvProName
        }, {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
                textStyle: {
                    color: '#ffffff',
                    fontSize: '12'
                },
            },
            data:salvProValue
        }],
        series: [{
                name: '值',
                type: 'bar',
                zlevel: 1,
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: 'rgb(57,89,255,1)'
                        }, {
                            offset: 1,
                            color: 'rgb(46,200,207,1)'
                        }]),
                    },
                },
                barWidth: 20,
                data: salvProValue
            },
            {
                name: '背景',
                type: 'bar',
                barWidth: 20,
                barGap: '-100%',
                data: salvProMax,
                itemStyle: {
                    normal: {
                        color: 'rgba(24,31,68,1)',
                        barBorderRadius: 30,
                    }
                },
            },
        ]
    };
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
    });

})();
// 柱状图模块
(function() {
    var myChart = echarts.init(document.querySelector(".bar2 .chart .chartyibiao1"));
    let angle = 0;//角度，用来做简单的动画效果的
    let value = 95;
    var option = {
      title: {
              text: '{a|'+ value +'}{c|%}',
              x: 'center',
              y: 'center',
              textStyle: {
                  rich:{
                      a: {
                          fontSize: 20,
                          color: '#29EEF3'
                      },
                      
                      c: {
                          fontSize: 20,
                          color: '#ffffff',
                          // padding: [5,0]
                      }
                  }
              }
          },
          legend: {
              type: "plain",
              orient: "vertical",
              right: 0,
              top: "10%",
              align: "auto",
              data: [{
                  name: '涨价后没吃过',
                  icon: "circle"
              }, {
                  name: '天天吃',
                  icon: "circle"
              }, {
                  name: '三五天吃一次',
                  icon: "circle"
              }, {
                  name: '半个月吃一次',
                  icon: "circle"
              }],
              textStyle: {
                  color: "white",
                  fontSize: 16,
                  padding: [10, 1, 10, 0]
              },
              selectedMode:false
          },
          series: [ {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                              startAngle: (0+angle) * Math.PI / 180,
                              endAngle: (90+angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                              startAngle: (180+angle) * Math.PI / 180,
                              endAngle: (270+angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                              startAngle: (270+-angle) * Math.PI / 180,
                              endAngle: (40+-angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                              startAngle: (90+-angle) * Math.PI / 180,
                              endAngle: (220+-angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                      let point = getCirlPoint(x0, y0, r, (90+-angle))
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4
                          },
                          style: {
                              stroke: "#0CD3DB",//粉
                              fill: "#0CD3DB"
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",  //绿点
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                      let point = getCirlPoint(x0, y0, r, (270+-angle))
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4
                          },
                          style: {
                              stroke: "#0CD3DB",      //绿
                              fill: "#0CD3DB"
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: '吃猪肉频率',
                  type: 'pie',
                  radius: ['58%', '45%'],
                  silent: true,
                  clockwise: true,
                  startAngle: 90,
                  z: 0,
                  zlevel: 0,
                  label: {
                      normal: {
                          position: "center",
      
                      }
                  },
                  data: [{
                          value: value,
                          name: "",
                          itemStyle: {
                              normal: {
                                  color: { // 完成的圆环的颜色
                                      colorStops: [{
                                          offset: 0,
                                          color: '#4FADFD' // 0% 处的颜色
                                      }, {
                                          offset: 1,
                                          color: '#28E8FA' // 100% 处的颜色
                                      }]
                                  },
                              }
                          }
                      },
                      {
                          value: 100-value,
                          name: "",
                          label: {
                              normal: {
                                  show: false
                              }
                          },
                          itemStyle: {
                              normal: {
                                  color: "#173164"
                              }
                          }
                      }
                  ]
              },
              
              {
                  name: "",
                  type: "gauge",
                  radius: "58%",
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 359.9,
                  splitNumber: 8,
                  hoverAnimation: true,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      length: 60,
                      lineStyle: {
                          width: 5,
                          color: "#061740"
                      }
                  },
                  axisLabel: {
                      show: false
                  },
                  pointer: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          opacity: 0
                      }
                  },
                  detail: {
                      show: false
                  },
                  data: [{
                      value: 0,
                      name: ""
                  }]
              },
              
          ]
      };
      function getCirlPoint(x0, y0, r, angle) {
          let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
          let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
          return {
              x: x1,
              y: y1
          }
      }
      
      function draw(){
          angle = angle+3
          myChart.setOption(option, true)
        //window.requestAnimationFrame(draw);
      }
      
      setInterval(function() {
          //用setInterval做动画感觉有问题
          draw()
      }, 100);
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
      
    });
})();
(function() {
  var myChart = echarts.init(document.querySelector(".bar2 .chart .chartyibiao2"));
  let angle = 0;//角度，用来做简单的动画效果的
  let value = 97;
  var option = {
    title: {
            text: '{a|'+ value +'}{c|%}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich:{
                    a: {
                        fontSize: 20,
                        color: '#29EEF3'
                    },
                    
                    c: {
                        fontSize: 20,
                        color: '#ffffff',
                        // padding: [5,0]
                    }
                }
            }
        },
        legend: {
            type: "plain",
            orient: "vertical",
            right: 0,
            top: "10%",
            align: "auto",
            data: [{
                name: '涨价后没吃过',
                icon: "circle"
            }, {
                name: '天天吃',
                icon: "circle"
            }, {
                name: '三五天吃一次',
                icon: "circle"
            }, {
                name: '半个月吃一次',
                icon: "circle"
            }],
            textStyle: {
                color: "white",
                fontSize: 16,
                padding: [10, 1, 10, 0]
            },
            selectedMode:false
        },
        series: [ {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function(params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                            startAngle: (0+angle) * Math.PI / 180,
                            endAngle: (90+angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            }, {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function(params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                            startAngle: (180+angle) * Math.PI / 180,
                            endAngle: (270+angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            }, {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function(params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                            startAngle: (270+-angle) * Math.PI / 180,
                            endAngle: (40+-angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            }, {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function(params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                            startAngle: (90+-angle) * Math.PI / 180,
                            endAngle: (220+-angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            }, {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function(params, api) {
                    let x0 = api.getWidth() / 2;
                    let y0 = api.getHeight() / 2;
                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                    let point = getCirlPoint(x0, y0, r, (90+-angle))
                    return {
                        type: 'circle',
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4
                        },
                        style: {
                            stroke: "#0CD3DB",//粉
                            fill: "#0CD3DB"
                        },
                        silent: true
                    };
                },
                data: [0]
            }, {
                name: "ring5",  //绿点
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function(params, api) {
                    let x0 = api.getWidth() / 2;
                    let y0 = api.getHeight() / 2;
                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                    let point = getCirlPoint(x0, y0, r, (270+-angle))
                    return {
                        type: 'circle',
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4
                        },
                        style: {
                            stroke: "#0CD3DB",      //绿
                            fill: "#0CD3DB"
                        },
                        silent: true
                    };
                },
                data: [0]
            }, {
                name: '吃猪肉频率',
                type: 'pie',
                radius: ['58%', '45%'],
                silent: true,
                clockwise: true,
                startAngle: 90,
                z: 0,
                zlevel: 0,
                label: {
                    normal: {
                        position: "center",
    
                    }
                },
                data: [{
                        value: value,
                        name: "",
                        itemStyle: {
                            normal: {
                                color: { // 完成的圆环的颜色
                                    colorStops: [{
                                        offset: 0,
                                        color: '#4FADFD' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#28E8FA' // 100% 处的颜色
                                    }]
                                },
                            }
                        }
                    },
                    {
                        value: 100-value,
                        name: "",
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#173164"
                            }
                        }
                    }
                ]
            },
            
            {
                name: "",
                type: "gauge",
                radius: "58%",
                center: ['50%', '50%'],
                startAngle: 0,
                endAngle: 359.9,
                splitNumber: 8,
                hoverAnimation: true,
                axisTick: {
                    show: false
                },
                splitLine: {
                    length: 60,
                    lineStyle: {
                        width: 5,
                        color: "#061740"
                    }
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        opacity: 0
                    }
                },
                detail: {
                    show: false
                },
                data: [{
                    value: 0,
                    name: ""
                }]
            },
            
        ]
    };
    function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
            x: x1,
            y: y1
        }
    }
    
    function draw(){
        angle = angle+3
        myChart.setOption(option, true)
      //window.requestAnimationFrame(draw);
    }
    
    setInterval(function() {
        //用setInterval做动画感觉有问题
        draw()
    }, 100);
  myChart.setOption(option);
  // 4 让图表跟随屏幕自动的去适应
  window.addEventListener('resize',function() {
      myChart.resize();
    
  });
})();
(function() {
    var myChart = echarts.init(document.querySelector(".bar2 .chart .chartyibiao3"));
    let angle = 0;//角度，用来做简单的动画效果的
    let value = 45;
    var option = {
      title: {
              text: '{a|'+ value +'}{c|km/h}',
              x: 'center',
              y: 'center',
              textStyle: {
                  rich:{
                      a: {
                          fontSize: 16,
                          color: '#29EEF3'
                      },
                      
                      c: {
                          fontSize: 16,
                          color: '#ffffff',
                          // padding: [5,0]
                      }
                  }
              }
          },
          legend: {
              type: "plain",
              orient: "vertical",
              right: 0,
              top: "10%",
              align: "auto",
              data: [{
                  name: '涨价后没吃过',
                  icon: "circle"
              }, {
                  name: '天天吃',
                  icon: "circle"
              }, {
                  name: '三五天吃一次',
                  icon: "circle"
              }, {
                  name: '半个月吃一次',
                  icon: "circle"
              }],
              textStyle: {
                  color: "white",
                  fontSize: 16,
                  padding: [10, 1, 10, 0]
              },
              selectedMode:false
          },
          series: [ {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                              startAngle: (0+angle) * Math.PI / 180,
                              endAngle: (90+angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                              startAngle: (180+angle) * Math.PI / 180,
                              endAngle: (270+angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                              startAngle: (270+-angle) * Math.PI / 180,
                              endAngle: (40+-angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                              startAngle: (90+-angle) * Math.PI / 180,
                              endAngle: (220+-angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                      let point = getCirlPoint(x0, y0, r, (90+-angle))
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4
                          },
                          style: {
                              stroke: "#0CD3DB",//粉
                              fill: "#0CD3DB"
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",  //绿点
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                      let point = getCirlPoint(x0, y0, r, (270+-angle))
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4
                          },
                          style: {
                              stroke: "#0CD3DB",      //绿
                              fill: "#0CD3DB"
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: '吃猪肉频率',
                  type: 'pie',
                  radius: ['58%', '45%'],
                  silent: true,
                  clockwise: true,
                  startAngle: 90,
                  z: 0,
                  zlevel: 0,
                  label: {
                      normal: {
                          position: "center",
      
                      }
                  },
                  data: [{
                          value: value,
                          name: "",
                          itemStyle: {
                              normal: {
                                  color: { // 完成的圆环的颜色
                                      colorStops: [{
                                          offset: 0,
                                          color: '#4FADFD' // 0% 处的颜色
                                      }, {
                                          offset: 1,
                                          color: '#28E8FA' // 100% 处的颜色
                                      }]
                                  },
                              }
                          }
                      },
                      {
                          value: 100-value,
                          name: "",
                          label: {
                              normal: {
                                  show: false
                              }
                          },
                          itemStyle: {
                              normal: {
                                  color: "#173164"
                              }
                          }
                      }
                  ]
              },
              
              {
                  name: "",
                  type: "gauge",
                  radius: "58%",
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 359.9,
                  splitNumber: 8,
                  hoverAnimation: true,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      length: 60,
                      lineStyle: {
                          width: 5,
                          color: "#061740"
                      }
                  },
                  axisLabel: {
                      show: false
                  },
                  pointer: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          opacity: 0
                      }
                  },
                  detail: {
                      show: false
                  },
                  data: [{
                      value: 0,
                      name: ""
                  }]
              },
              
          ]
      };
      function getCirlPoint(x0, y0, r, angle) {
          let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
          let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
          return {
              x: x1,
              y: y1
          }
      }
      
      function draw(){
          angle = angle+3
          myChart.setOption(option, true)
        //window.requestAnimationFrame(draw);
      }
      
      setInterval(function() {
          //用setInterval做动画感觉有问题
          draw()
      }, 100);
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
      
    });
  })();
  (function() {
    var myChart = echarts.init(document.querySelector(".bar2 .chart .chartyibiao4"));
    let angle = 0;//角度，用来做简单的动画效果的
    let value = 45;
    var option = {
      title: {
              text: '{a|'+ value +'}{c|km/h}',
              x: 'center',
              y: 'center',
              textStyle: {
                  rich:{
                      a: {
                          fontSize: 16,
                          color: '#29EEF3'
                      },
                      
                      c: {
                          fontSize: 16,
                          color: '#ffffff',
                          // padding: [5,0]
                      }
                  }
              }
          },
          legend: {
              type: "plain",
              orient: "vertical",
              right: 0,
              top: "10%",
              align: "auto",
              data: [{
                  name: '涨价后没吃过',
                  icon: "circle"
              }, {
                  name: '天天吃',
                  icon: "circle"
              }, {
                  name: '三五天吃一次',
                  icon: "circle"
              }, {
                  name: '半个月吃一次',
                  icon: "circle"
              }],
              textStyle: {
                  color: "white",
                  fontSize: 16,
                  padding: [10, 1, 10, 0]
              },
              selectedMode:false
          },
          series: [ {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                              startAngle: (0+angle) * Math.PI / 180,
                              endAngle: (90+angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                              startAngle: (180+angle) * Math.PI / 180,
                              endAngle: (270+angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                              startAngle: (270+-angle) * Math.PI / 180,
                              endAngle: (40+-angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      return {
                          type: 'arc',
                          shape: {
                              cx: api.getWidth() / 2,
                              cy: api.getHeight() / 2,
                              r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                              startAngle: (90+-angle) * Math.PI / 180,
                              endAngle: (220+-angle) * Math.PI / 180
                          },
                          style: {
                              stroke: "#0CD3DB",
                              fill: "transparent",
                              lineWidth: 1.5
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                      let point = getCirlPoint(x0, y0, r, (90+-angle))
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4
                          },
                          style: {
                              stroke: "#0CD3DB",//粉
                              fill: "#0CD3DB"
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: "ring5",  //绿点
                  type: 'custom',
                  coordinateSystem: "none",
                  renderItem: function(params, api) {
                      let x0 = api.getWidth() / 2;
                      let y0 = api.getHeight() / 2;
                      let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
                      let point = getCirlPoint(x0, y0, r, (270+-angle))
                      return {
                          type: 'circle',
                          shape: {
                              cx: point.x,
                              cy: point.y,
                              r: 4
                          },
                          style: {
                              stroke: "#0CD3DB",      //绿
                              fill: "#0CD3DB"
                          },
                          silent: true
                      };
                  },
                  data: [0]
              }, {
                  name: '吃猪肉频率',
                  type: 'pie',
                  radius: ['58%', '45%'],
                  silent: true,
                  clockwise: true,
                  startAngle: 90,
                  z: 0,
                  zlevel: 0,
                  label: {
                      normal: {
                          position: "center",
      
                      }
                  },
                  data: [{
                          value: value,
                          name: "",
                          itemStyle: {
                              normal: {
                                  color: { // 完成的圆环的颜色
                                      colorStops: [{
                                          offset: 0,
                                          color: '#4FADFD' // 0% 处的颜色
                                      }, {
                                          offset: 1,
                                          color: '#28E8FA' // 100% 处的颜色
                                      }]
                                  },
                              }
                          }
                      },
                      {
                          value: 100-value,
                          name: "",
                          label: {
                              normal: {
                                  show: false
                              }
                          },
                          itemStyle: {
                              normal: {
                                  color: "#173164"
                              }
                          }
                      }
                  ]
              },
              
              {
                  name: "",
                  type: "gauge",
                  radius: "58%",
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 359.9,
                  splitNumber: 8,
                  hoverAnimation: true,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      length: 60,
                      lineStyle: {
                          width: 5,
                          color: "#061740"
                      }
                  },
                  axisLabel: {
                      show: false
                  },
                  pointer: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          opacity: 0
                      }
                  },
                  detail: {
                      show: false
                  },
                  data: [{
                      value: 0,
                      name: ""
                  }]
              },
              
          ]
      };
      function getCirlPoint(x0, y0, r, angle) {
          let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
          let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
          return {
              x: x1,
              y: y1
          }
      }
      
      function draw(){
          angle = angle+3
          myChart.setOption(option, true)
        //window.requestAnimationFrame(draw);
      }
      
      setInterval(function() {
          //用setInterval做动画感觉有问题
          draw()
      }, 100);
    myChart.setOption(option);
    // 4 让图表跟随屏幕自动的去适应
    window.addEventListener('resize',function() {
        myChart.resize();
      
    });
  })();
(function() {
  var myChart = echarts.init(document.querySelector(".map .chart"));
  $.get('json/hangzhou.json',function(geoMap) {
    console.log(geoMap);
    echarts.registerMap('hangzhou',geoMap);
    var data= [
      {name: "上城区", value: 480},
      {name: "拱墅区", value: 39},
      {name: "西湖区", value: 152},
      {name: "滨江区", value: 89},
      {name: "萧山区", value: 120},
      {name: "余杭区", value: 52},
      {name: "富阳区", value: 70},
      {name: "临安区", value: 352},
      {name: "临平区", value: 99},
      {name: "桐庐县", value: 39},
      {name: "淳安县", value: 199},
      {name: "建德市", value: 39},
      {name: "钱塘区", value: 199}
    ];
    var geoCoordMap = {
      "上城区": [120.171465,30.250236],
      "拱墅区": [120.150053,30.314697],
      "西湖区": [120.147376,30.272934],
      "滨江区": [120.21062,30.206615],
      "萧山区": [120.27069,30.162932],
      "余杭区": [119.978959,30.27365],
      "富阳区": [119.949869,30.049871],
      "临安区": [119.715101,30.2311538],
      "临平区": [120.299376,30.419025],
      "桐庐县": [119.685045,29.797437],
      "淳安县": [119.044276,29.604177],
      "建德市": [119.279089,29.472284],
      "钱塘区": [120.493972,30.322904]
    };
      var max = 480, min = 9; // todo 
      var maxSize4Pin = 100, minSize4Pin = 20;

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
              res.push({
                  name: data[i].name,
                  value: geoCoord.concat(data[i].value)
              });
          }
      }
      return res;
  };


      option = {
          tooltip: {
              trigger: 'item',
              formatter: function (params) {
                if(typeof(params.value)[2] == "undefined"){
                  return params.name + ' : ' + params.value;
                }else{
                  return params.name + ' : ' + params.value[2];
                }
              }
          },
          
        //   visualMap: {
        //       show: false,
        //       min: 0,
        //       max: 500,
        //       left: 'left',
        //       top: 'bottom',
        //       text: ['高', '低'], // 文本，默认为数值文本
        //       calculable: true,
        //       seriesIndex: [1],
        //       inRange: {
        //           // color: ['#3B5077', '#031525'] // 蓝黑
        //           // color: ['#ffc0cb', '#800080'] // 红紫
        //           // color: ['#3C3B3F', '#605C3C'] // 黑绿
        //           color: ['#006edd',"#2957a2"] // 黑紫黑
        //           // color: ['#23074d', '#cc5333'] // 紫红
        //           // color: ['#00467F', '#A5CC82'] // 蓝绿
        //           // color: ['#1488CC', '#2B32B2'] // 浅蓝
        //           // color: ['#00467F', '#A5CC82'] // 蓝绿
        //           // color: ['#00467F', '#A5CC82'] // 蓝绿
        //           // color: ['#00467F', '#A5CC82'] // 蓝绿
        //           // color: ['#00467F', '#A5CC82'] // 蓝绿

        //       }
        //   },
          // toolbox: {
          //     show: true,
          //     orient: 'vertical',
          //     left: 'right',
          //     top: 'center',
          //     feature: {
          //             dataView: {readOnly: false},
          //             restore: {},
          //             saveAsImage: {}
          //             }
          // },
          geo: {
              show: true,
              type:'map',
              map: 'hangzhou',
              zoom:1.2,
              label: {
                  normal: {
                      show: false,
                  },
                  emphasis: {
                      show: false,
                  }
              },
              roam: true,
              itemStyle: {
                normal: {
                  // 地图省份的背景颜色
                  areaColor: "rgba(20, 41, 87,0.6)",
                  borderColor: "#195BB9",
                  borderWidth: 1
                },
                emphasis: {
                  areaColor: "#2B91B7"
                }
              }
          },
          series : [
          {
              name: 'credit_pm2.5',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(data),
              symbolSize: function (val) {
                  return val[2] / 10;
              },
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  },
                  emphasis: {
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#D4EEFF'
                  }
              }
          },
          {
              type: 'map',
              map: 'hangzhou',
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                  normal: {
                      show: false
                  },
                  emphasis: {
                      show: false,
                      textStyle: {
                          color: '#fff'
                      }
                  }
              },
              roam: true,
              itemStyle: {
                  normal: {
                      areaColor: '#006edd',
                      borderColor: '#3B5077',
                  },
                  emphasis: {
                      areaColor: '#2B91B7'
                  }
              },
              animation: false,
              data: data
          },
          {
              name: '点',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: function (val) {
                  var a = (maxSize4Pin - minSize4Pin) / (max - min);
                  var b = minSize4Pin - a*min;
                  b = maxSize4Pin - a*max;
                  return a*val[2]+b;
              },
              label: {
                  normal: {
                      show: true,
                      textStyle: {
                          color: '#fff',
                          fontSize: 9,
                      }
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#C9C132', //标志颜色
                  }
              },
              zlevel: 6,
              data: convertData(data),
          },
          {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: convertData(data.sort(function (a, b) {
                  return b.value - a.value;
              }).slice(0, 5)),
              symbolSize: function (val) {
                  return val[2] / 10;
              },
              showEffectOn: 'render',
              rippleEffect: {
                  brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color:'rgba(0,108,255,0.7)',
                      shadowBlur: 10,
                      shadowColor: '#05C3F9'
                  }
              },
              zlevel: 1
          },
          
      ]
      };
      myChart.setOption(option);
      window.addEventListener('resize',function() {
        myChart.resize();
      });
  });
    
  // // 监听浏览器缩放，图表对象调用缩放resize函数
  //   window.addEventListener("resize", function() {
  //   myChart.resize();
  //   })
  // })
})();
